<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import { ref } from 'vue';

const form = useForm({
    name: '',
    description: '',
    avatar: null,
});

const previewAvatar = ref(null);

const handleAvatarChange = (event) => {
    const file = event.target.files[0];
    if (file) {
        form.avatar = file;
        const reader = new FileReader();
        reader.onload = (e) => {
            previewAvatar.value = e.target.result;
        };
        reader.readAsDataURL(file);
    }
};

const submit = () => {
    form.post(route('bars.store'), {
        forceFormData: true,
        onFinish: () => {
            form.reset('avatar');
        },
    });
};

const defaultAvatarUrl = (name) => {
    return `https://api.dicebear.com/7.x/shapes/svg?seed=${name || 'default'}`;
};
</script>

<template>
    <Head title="创建贴吧" />

    <AuthenticatedLayout>
        <div class="max-w-3xl mx-auto">
            <!-- 创建贴吧表单卡片 -->
            <div class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                <div class="px-6">
                    <h1 class="text-3xl font-bold mb-6">创建新贴吧</h1>

                    <form @submit.prevent="submit" class="space-y-6">
                        <!-- 贴吧名称 -->
                        <div class="space-y-2">
                            <InputLabel for="name" value="贴吧名称" />
                            <TextInput
                                id="name"
                                type="text"
                                class="mt-1 block w-full"
                                v-model="form.name"
                                required
                                autofocus
                                maxlength="50"
                                placeholder="请输入贴吧名称（2-50个字符）"
                            />
                            <InputError class="mt-2" :message="form.errors.name" />
                            <p class="text-xs text-muted-foreground">
                                贴吧名称将用于识别你的社区，请选择一个有意义且容易记住的名称
                            </p>
                        </div>

                        <!-- 贴吧简介 -->
                        <div class="space-y-2">
                            <InputLabel for="description" value="贴吧简介" />
                            <textarea
                                id="description"
                                class="w-full px-3 py-2 border border-input rounded-md bg-transparent text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 resize-none"
                                v-model="form.description"
                                rows="4"
                                maxlength="500"
                                placeholder="简要描述这个贴吧的主题和内容（20-500个字符）"
                            ></textarea>
                            <InputError class="mt-2" :message="form.errors.description" />
                            <p class="text-xs text-muted-foreground">
                                简介将帮助其他用户了解你的贴吧，建议清晰简洁
                            </p>
                        </div>

                        <!-- 贴吧头像 -->
                        <div class="space-y-2">
                            <InputLabel for="avatar" value="贴吧头像" />
                            <div class="flex items-center space-x-6">
                                <img
                                    :src="previewAvatar || defaultAvatarUrl(form.name)"
                                    alt="头像预览"
                                    class="h-24 w-24 rounded-lg border-2 border-input object-cover"
                                />
                                <div>
                                    <label
                                        for="avatar"
                                        class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all border bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 cursor-pointer"
                                    >
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                                        </svg>
                                        选择图片
                                    </label>
                                    <input
                                        id="avatar"
                                        type="file"
                                        accept="image/*"
                                        class="hidden"
                                        @change="handleAvatarChange"
                                    />
                                    <InputError class="mt-2" :message="form.errors.avatar" />
                                    <p class="text-xs text-muted-foreground mt-2">
                                        支持 JPG、PNG 格式，建议尺寸 200x200 像素，最大 2MB
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- 创建规则提示 -->
                        <div class="bg-muted border border-border rounded-lg p-4">
                            <h3 class="text-sm font-medium mb-2">创建规则</h3>
                            <ul class="text-xs text-muted-foreground space-y-1 list-disc list-inside">
                                <li>贴吧名称需符合社区规范，不得包含敏感词汇</li>
                                <li>确保你创建的贴吧主题明确，内容健康向上</li>
                                <li>作为吧主，你需要负责管理贴吧内容和成员</li>
                                <li>创建后不能随意更改贴吧名称</li>
                            </ul>
                        </div>

                        <!-- 提交按钮 -->
                        <div class="flex items-center justify-end gap-4 pt-6 border-t">
                            <Link
                                :href="route('bars.index')"
                                class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all border bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2"
                            >
                                取消
                            </Link>
                            <PrimaryButton :disabled="form.processing">
                                创建贴吧
                            </PrimaryButton>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

